<template>
  <svg ref="svg1" id="svg1" :width="svg.width" :height="svg.height" style="border: 1px solid red"
       xmlns="http://www.w3.org/2000/svg">
    <defs id = "direct-001">
      <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" style="stop-color:rgb(150,86,70);stop-opacity:1" />
        <stop offset="50%" style="stop-color:rgb(235,235,235);stop-opacity:1" />
        <stop offset="100%" style="stop-color:rgb(150,86,70);stop-opacity:1" />
      </linearGradient>
      <linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" style="stop-color:rgb(14,58,21);stop-opacity:1" />
        <stop offset="50%" style="stop-color:rgb(182,182,182);stop-opacity:1" />
        <stop offset="100%" style="stop-color:rgb(14,58,21);stop-opacity:1" />
      </linearGradient>
    </defs>
  </svg>
</template>

<script>
import {draw,refresh} from '@/svgutil/svg-draw';
import {defineData} from "./heat-furnace-data1";
import {drawDataInitScale, round} from '@/svgutil/comm-method';

export default {
  name: "heat-furnace",
  data() {
    return {
      svg: {
        initWidth: 1300,
        initHeight: 800,
        width: 1300,
        height: 800,
      },

      values: {
        'P001': {v: 1.23, w: 0},
        'P002': {v: 2.99, w: 1},
      },
      drawDataList: [],
      option: {
        totalScaleMax: 32,
        totalScaleMin: 0.25,
        //listeners: ['zoom','move','reset'],
      },
      svgEle: null,
    }
  },
  created() {
  },
  mounted() {
    this.svgEle = draw("svg1", this.drawDataList, this.values,this.createInitData,this.option);
    setInterval(() => {
      this.values.P001 = {v: round(Math.random() * 100,2), w: Math.round(Math.random())};
      refresh(this.svgEle,this.drawDataList,this.values)
    },50000);
  },
  methods: {
    createInitData(){
      this.drawDataList[0] = defineData(this.values);
      //初始放大倍数
      //drawDataInitScale([]);
      let scale = window.devicePixelRatio;
      drawDataInitScale(this.drawDataList, 1 / scale,false,false);
      return this.drawDataList;
    },
  }
}
</script>

<style scoped>
#svg1 {
  background: #2c3e50;
}

.line {

}
</style>